import { useResizeObserverStore } from '@/store/modules/resize-observer-store'
import { useAppConfigStore } from '@/store/modules/app-store'
import _ from 'lodash'
const appConfigStore = useAppConfigStore()
const { createObserver, destroyObserver } = useResizeObserverStore()

interface UseResizeConfig {
  pagination?: boolean
}

export const useResize = (config: UseResizeConfig = { pagination: true }) => {
  const tableScrollY = ref(0)
  const expand = ref(false)
  const window = document.body
  let queryEl: Element
  onMounted(() => {
    queryEl = document.querySelector('.query-form-wrapper') as Element

    function onResizeTable() {
      // 获取表格头部DOM信息
      const tableHeaderEl = document.querySelector('.ant-table-header') as Element
      const tableSummaryEl = document.querySelector('.ant-table-summary') as Element
      const { bottom: parentRectBottom } = appConfigStore.getLayoutContentClientRect
      const { bottom: tableHeaderRectBottom } = tableHeaderEl.getBoundingClientRect()
      let tableHeight = parentRectBottom - tableHeaderRectBottom - 25
      if (tableSummaryEl) {
        const { height: tableSummaryRectHeight } = tableSummaryEl.getBoundingClientRect()
        tableHeight -= tableSummaryRectHeight
      }
      // 表格列表高度

      if (config.pagination) {
        // 获取分页DOM信息
        const paginationEl = document.querySelector('.query-table-page') as Element
        const { height: paginationRectHeight } = paginationEl.getBoundingClientRect()
        tableHeight -= paginationRectHeight
      }
      tableScrollY.value = tableHeight
    }
    createObserver(window, _.debounce(onResizeTable, 500))
    createObserver(queryEl, onResizeTable)
  })
  onUnmounted(() => {
    destroyObserver(window)
    destroyObserver(queryEl)
  })
  return {
    tableScrollY,
    expand
  }
}
